<template>
  <div :data-bar-cid="cid" class="chart" />
</template>

<script>
import { ChartMixin } from '../../../../components/mixin'

export default {
  name: 'Bar',
  mixins: [ChartMixin],
  props: {
    title: {
      type: [Array],
      required: true
    },
    data: {
      type: [Array],
      required: true
    }
  },
  watch: {
    data(val) {
      console.log('哈哈', val)
      this.setOptions({ series: val })
    }
  },
  methods: {
    setOptions() {
      console.log('chart 设置')
      const option = {
        color: ['#3398DB'],
        title: {
          text: ''
        },
        tooltip: {
          // trigger: 'item',
          show: true
          // position: [10, 10]
        },
        xAxis: {
          type: 'category',
          data: this.title,
          axisLabel: {
            show: false
          }
        },
        yAxis: {
          // max: 20,
          type: 'value'
        },
        series: [{
          data: this.data,
          // barWidth: '62.8%',
          barMaxWidth: '80px',
          label: {
            rotate: 90,
            show: true,
            formatter: '{b} {c}'
          },
          large: true,
          type: 'bar'
        }]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped>
  .chart {
    width: 1000px;
    height: 600px;
    display: block;
    padding: 0;
    margin: 0;
  }
</style>
